<template>
	<view v-if="pageShow" class="container">
		<view class="order-infro solid-bottom">
			<view class="title">
				<text>订单详情</text>
			</view>
			<view class="order-content">
				<text class="name">服务名称：</text>
				<text class="params">{{orderInfo.shop_name}}</text>
			</view>
			<view class="order-content">
				<text class="name">服务金额：</text>
				<text class="params">{{orderInfo.money}}元</text>
			</view>
			<view class="order-content">
				<text class="name">订单编号：</text>
				<text class="params">{{orderInfo.order_no}}</text>
			</view>
			<view class="order-content">
				<text class="name">交易时间：</text>
				<text class="params">{{orderInfo.createtime_text}}</text>
			</view>
		</view>
		<view class="middle_box flex-between flex-align">
			<view class="flex-align">
				<image class="pay_icon mr10" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/coupon_icon1.png" mode="widthFix">
				</image>
				<text class="">代金券</text>
			</view>	
			<view class="right">
				<view class="flex-align" v-if="couponList.length>0 && !orderInfo.voucher_id" @click="goChoose">
					<text class="fz30 cff4" v-if="couponSelected != null">优惠：¥ {{couponSelected.voucher_reduce}}</text>
					<text 
					style="font-size: 24rpx; background-color: #FA5151; color: #fff; padding: 4rpx 10rpx; border-radius: 4rpx; min-width: 110rpx; display: flex; justify-content: center;align-items: center;" 
					v-else> {{couponList.length}} 张可用</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="flex-align" v-else>
					<text class="fz30 c999 mr10">暂无可用</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view v-if="couponSelected != null" class="final-price solid-top">
			<view class="price">
				<view>优惠：<text class="del-price">¥ {{couponSelected.voucher_reduce}}</text></view>
				<view style="margin-left: 30rpx;">实付总额：<text class="true-price">¥ {{finalMoney}}</text></view>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="btn" @click="addBuy">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	
	import shopDetailApi from "@/api/shopDetail.js"
	import personalApi from "@/api/personal.js"
	export default {
		data() {
			return {
				orderNo: '',
				orderInfo: {},
				pageShow: false,
				couponList: [], //代金券列表
				couponSelected: null, //代金券对象
				finalMoney: null, //实付总额
			}
		},
		onLoad(e) {
			this.orderNo = e.orderNo
			this.getDetail()
		},
		onShow() {
			let that = this
			uni.$on('returnData', function(data) {
				console.log("让我看看刚进来是怎么个事", data);
				if (data != null) {
					that.couponSelected = data;
				} else {
					that.couponSelected = null
				}
			})
		},
		watch: {
			"couponSelected"(newVal, oldVal) {
				if (newVal != null) {
					this.finalMoney = this.orderInfo.money - newVal.voucher_reduce
				}
			}
		},
		methods: {
			//获取订单详情
			async getDetail() {
				let res = await shopDetailApi.orderDetail({order_no: this.orderNo})
				if(res.code === 1) {
					this.orderInfo = res.data
					this.pageShow = true
					this.getCouponList()
				}
			},
			
			//立即支付
			async addBuy() {
				let that = this
				let obj = {
					order_no: this.orderNo,
				}
				if (this.couponSelected != null) {
					this.$set(obj, "voucher_id", this.couponSelected.id)
				}
				let res = await shopDetailApi.payShop(obj)
				if(res.code === 1) {
					wx.requestPayment({
					    timeStamp: res.data.timeStamp,
					    nonceStr: res.data.nonceStr,
					    package: res.data.package,
					    paySign: res.data.paySign,
					    signType: res.data.signType,
					    success:  (res)=> {
								uni.redirectTo({
									url: '/pagesOrder/myOrder/myOrder?index=0'
								})
					    },
							fail: (res)=> {
								that.couponList = []
								that.couponSelected.id = ''
							}
					});
				} else {
					this.$common.msgShow(res.msg)
				}
			},
			
			//获取代金券列表
			async getCouponList() {
				let res = await personalApi.getCouponList({
					status: 1,
					amount: this.orderInfo.money
				})
				if (res.code == 1) {
					console.log('代金券列表', res);
					this.couponList = res.data
				} else {
					this.$used.msg(res.msg)
				}
			},
			
			//去选择代金券
			goChoose() {
				console.log(this.couponType)
				if (this.couponSelected != null) { //携带已选择的代金券id
					uni.navigateTo({
						url: '/pagesPersonal/myCoupons/chooseCoupons?couponId=' + this.couponSelected.id + '&amount=' + this.orderInfo.money
					})
				} else {
					uni.navigateTo({
						url: '/pagesPersonal/myCoupons/chooseCoupons?amount=' + this.orderInfo.money
					})
				}
			
			},
		}
	}
</script>

<style lang="scss" scoped>
@import url(@/common/css/reset.css);
@import "payOrder.scss";
</style>
